<template>
    <title-box title="告警信息">
        <BasicTable ref="tableRef" :params="params" :columns="columns" :load="false" :selectbox="false" :query="queryAlarm">
            <template #table="{ body }">
                <template v-if="body.column.key === 'grade'">
                    <a-tag v-if="body.record.grade === 1" color="error">{{ options[body.record.grade] }}</a-tag>
                    <a-tag v-if="body.record.grade === 2" color="warning">{{ options[body.record.grade] }}</a-tag>
                    <a-tag v-if="body.record.grade === 3" color="default">{{ options[body.record.grade] }}</a-tag>
                </template>
            </template>
        </BasicTable>
    </title-box>
</template>
<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import TitleBox from './../TitleBox/index.vue'
import { BasicTable } from '@iframe/tools/components'
import { queryAlarm } from '/@/api/Iframe/Home/index.js'

const props = defineProps({
    stationId: {
        type: Number
    }
})

const options = {
    1: '严重',
    2: '告警',
    3: '提示'
}

const tableRef = ref()
const params = reactive({
    stationId: props.stationId
})
const columns = [
    {
        title: '设备序列号',
        dataIndex: 'no',
        key: 'no',
        align: 'center'
    },
    {
        title: '设备编号',
        dataIndex: 'code',
        key: 'code',
        align: 'center'
    },
    {
        title: '告警代码',
        dataIndex: 'errorCode',
        key: 'errorCode',
        width: 100
    },
    {
        title: '告警级别',
        dataIndex: 'grade',
        key: 'grade'
    },
    {
        title: '告警名称',
        dataIndex: 'name',
        key: 'name'
    }
]

const query = () => {
    if (props.stationId) {
        tableRef.value?.handleRefresh()
    }
}
watch(
    () => props.stationId,
    () => {
        params.stationId = props.stationId
        query()
    }
)

onMounted(() => {
    query()
})
</script>
